<template>
	<!-- 首页 -->
	<view>
		<view class="top_search">
			<buji-search @click="searchGoods"></buji-search>
		</view>
		<view class="concent">
			<view class="type">
				<view class="choose" v-for="(item,index) in classifyList" :key="index"
					@click="gotoclassify(item.classify_id)">
					<image :src="item.imgUrl"></image>
					<text>{{item.text}}</text>
				</view>
			</view>
			<view class="title">
				<text>--------猜您喜欢--------</text>
			</view>
			<!-- 使用组件封装商品 -->
			<view class="section">
				<view v-for="(item,index) in backupActivityList" :key="index">
					<buji-goods :goods="item" @click="Todetails(item)" show-time="true"></buji-goods>
				</view>
			</view>
		</view>
		<div class="bottom">
			<text>没有更多啦~~~</text>
		</div>
		<view class="wrap">
			<u-back-top :scroll-top="scrollTop"></u-back-top>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'

	export default {
		data() {
			// 各个活动的内容
			return {
				scrollTop: 0,
				activityList: [],
				backupActivityList: [],
				classifyList: [{
						classify_id: 1,
						text: '鞋帽服饰',
						imgUrl: '../../static/type_image/衣服.png'
					},
					{
						classify_id: 2,
						text: '学习用品',
						imgUrl: '../../static/type_image/书本.png'
					},
					{
						classify_id: 3,
						text: '交通工具',
						imgUrl: '../../static/type_image/自行车 (1).png'
					},
					{
						classify_id: 4,
						text: '电子产品',
						imgUrl: '../../static/type_image/手机.png'
					},
					{
						classify_id: 5,
						text: '生活用品',
						imgUrl: '../../static/type_image/生活用品 (1).png'
					},
					{
						classify_id: 6,
						text: '其他',
						imgUrl: '../../static/type_image/其它-03 (1).png'
					},
				]
			}
		},
		computed: {
			...mapState('buji_search', ['search']),
		},
		methods: {
			...mapMutations('buji_search', ['updateGoods', 'updateClass']),

			gotoclassify(id) {
				this.updateClass(id)
				uni.navigateTo({
					url: "/subpkg/classify/classify"
				})
			},
			Todetails(item) {
				this.updateGoods(item);
				uni.navigateTo({
					url: "/subpkg/details/details"
				})
			},
			searchGoods() {
				const searchStr = this.search + "";
				this.backupActivityList = {
					...[]
				};
				let index = 0;
				for (let i = 0; i < this.activityList.length; i++) {
					// console.log(i, this.activityList[i].goods_name, this.activityList[i].goods_name.indexOf(searchStr));
					if (this.activityList[i].goods_name.indexOf(searchStr) != -1) {
						this.backupActivityList[index] = this.activityList[i];
						index++;
					}
				}
			},
			// 获取商品列表 
			getGoods() {
				this.activityList = [];
				wx.cloud.callFunction({
					name: 'getGoods',
					// complete: res => {
					// 	 console.info('complete', res);
					// },
					success: res => {
						console.info('success', res.result);
						for (let i = 0; i < res.result.data.length; i++) {
							this.activityList.push(res.result.data[i]);
						}
						for (let j = 0; j < this.activityList.length; j++) {
							let date = this.activityList[j].time
							let startTime = new Date(date).getTime();
							let nowTime = Date.parse(new Date());
							let time = parseInt((nowTime - startTime) / 1000);
							if (time < 60) {
								this.activityList[j].time = `${time}秒`
							} else if (time < 3600) {
								let temp = parseInt(time / 60)
								this.activityList[j].time = `${temp}分钟`
							} else if (time < 86400) {
								let temp = parseInt(time / 3600)
								this.activityList[j].time = `${temp}小时`
							} else if (time < 2592000) {
								let temp = parseInt(time / 86400)
								this.activityList[j].time = `${temp}天`
							} else if (time < 31104000) {
								let temp = parseInt(time / 2592000)
								this.activityList[j].time = `${temp}月`
							} else {
								let temp = parseInt(time / 31104000)
								this.activityList[j].time = `${temp}年`
							}
						}
						this.backupActivityList = this.activityList
					},
					fail: res => {
						console.info('fail', res);
					}
				});
			},
			byScrollTop() {
				uni.scrollTop = 0;
				uni.pageYOffset = 0; // 兼容ios
				uni.body.scrollTop = 0; // 兼容低版本ie
			}

		},
		watch: {
			search: {
				immediate: true,
				handler(newVal) {
					if (newVal === '') {
						this.backupActivityList = this.activityList
					}
				}
			}
		},
		onShow() {
			this.getGoods()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		}
	}
</script>


<style>
	.top_search {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
	}

	.concent {
		display: flex;
		flex-direction: column;
		margin-top: 100rpx;
		width: 100%;
		height: 100%;

	}

	/* 主页类型选择框 */
	.type {
		margin-top: -10rpx;
		height: 350rpx;
		width: 750rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-around;
	}

	.choose {
		margin-top: 10rpx;
		width: 245rpx;
		height: 170rpx;
		border-radius: 25rpx;
		display: flex;
		flex-direction: column;
		background-color: #efefef;
	}

	.choose image {
		width: 121rpx;
		height: 120rpx;
		margin-left: 60rpx;
		margin-top: 7rpx;
	}

	.choose text {
		font-size: 35rpx;
		font-weight: 600;
		text-align: center;
	}

	/* 猜你喜欢 */
	.title {
		height: 75rpx;
		line-height: 90rpx;
		color: darkgrey;
		font-size: large;
		font-weight: bolder;
		text-align: center;

	}

	/* 物品内容 */
	.section {
		height: 100%;
		width: 100%;
		overflow-y: scroll;
	}

	.bottom {
		height: 200rpx;
		line-height: 200rpx;
		text-align: center;
		font-size: 36rpx;
	}
</style>
